<template>
  <div class="app-container">
    <!-- 条件栏 -->
    <page-filter
      v-model:query="filterInfo.query"
      :filter-list="filterInfo.list"
    />
    <modelTips
      :items="modelTipsInfo.items"
      :title="modelTipsInfo.title"
      :brackets="true"
    />
    <!-- 表格 -->
    <table-container
      :refresh="tableInfo.refresh"
      :init-curpage="tableInfo.initCurpage"
      v-model:data="tableInfo.data"
      :api="tableInfo.api"
      :tab-index="true"
      :check-box="false"
      :query="filterInfo.query"
      :field-list="tableInfo.fieldList"
      :handle="tableInfo.handle"
      @handleEvent="handleEvent"
      :row-class-name="tableRowClassName"
    >
      <template v-slot:col-businessLicense="scope">
        <p>{{ scope.row.businessLicense }}</p>
        <p>{{ scope.row.businessLicenseWarningTypeValue }}</p>
      </template>
      <template v-slot:col-medicalDeviceLicense="scope">
        <p>{{ scope.row.medicalDeviceLicense }}</p>
        <p>{{ scope.row.medicalDeviceLicenseWarningTypeValue }}</p>
      </template>
      <template v-slot:col-firstMedicalDeviceFiling="scope">
        <p>{{ scope.row.firstMedicalDeviceFiling }}</p>
        <p>{{ scope.row.firstMedicalDeviceFilingWarningTypeValue }}</p>
      </template>
      <template v-slot:col-sanitaryLicense="scope">
        <p>{{ scope.row.sanitaryLicense }}</p>
        <p>{{ scope.row.sanitaryLicenseWarningTypeValue }}</p>
      </template>
    </table-container>
  </div>
</template>

<script setup name="contractExpireWarning">
import PageFilter from '@/components/PageFilter/index'
import TableContainer from '@/components/TableContainer/index'
import { contractExpireWarning } from '@/api/warning'
import { getSupplierAll } from '@/api/core'
import modelTips from '@/components/ModelTips/index'
import { useRoute } from 'vue-router'
const route = useRoute()
const { proxy } = getCurrentInstance()

//颜色标识
const modelTipsInfo = reactive({
  title: '合同效期预警类型',
  items: [
    {
      label: '近效期',
      style: { width: '10px', height: '10px', background: '#fceacb' },
    },
    {
      label: '过期',
      style: { width: '10px', height: '10px', background: '#f5e4e4' },
    },
  ],
})
const listTypeInfo = reactive({
  typeList: [],
})
// 过滤相关配置
const filterInfo = reactive({
  query: {
    warningType: 'nearly,expire',
  },
  list: [
    {
      label: '合同名称',
      value: 'contractName',
      type: 'input',
      event: search,
    },
    {
      label: '合同编号',
      value: 'orderNo',
      type: 'input',
      event: search,
    },
    {
      label: '近效期天数小于等于',
      value: 'validityDay',
      type: 'input',
      event: search,
    },
    {
      label: '合同类型',
      value: 'contractType',
      type: 'select-model',
      code: 'contract_type',
      event: search,
    },
    {
      label: '供应商',
      value: 'supplierId',
      type: 'slip-select',
      api: getSupplierAll,
      keyField: 'supplierName',
      valueField: 'supplierId',
      event: search,
    },
    {
      label: '效期状态',
      value: 'warningType',
      type: 'select-model',
      multiple: true,
      code: 'contract_expire_warning_type',
      event: search,
    },
    { type: 'button', label: '搜索', event: search },
  ],
  // searchBtn: [{ type: "button", label: "搜索", event: search }]
})
// 表格相关
const tableInfo = reactive({
  refresh: 1,
  initCurpage: 1,
  api: contractExpireWarning,
  data: [],
  selections: [],
  fieldList: [
    { label: '合同编号', value: 'orderNo' },
    { label: '合同名称', value: 'contractName' },
    { label: '合同类型', value: 'contractTypeValue' },
    { label: '供应商', value: 'supplierName' },
    { label: '签订日期', value: 'signDate' },
    { label: '合同生效日期', value: 'contractStartDate' },
    { label: '合同失效日期', value: 'contractEndDate' },
    { label: '效期状态', value: 'warningTypeValue' },
    { label: '合同近效期（天）', value: 'validityDay' },
  ],
})
const supplierInfo = reactive({
  api: getSupplierAll,
  query: {
    supplierAuth: 'supplierId',
    sort: 'create_time desc',
  },
})

watch(
  () => route.params,
  (val) => {
    const params = route.params
    const _paramsData = params.paramsData && JSON.parse(params.paramsData)
    if (
      params &&
      params.dataIndex !== undefined &&
      params.dataIndex !== null &&
      route.name === 'contractExpireWarning'
    ) {
      filterInfo.query.contractName = ''
      filterInfo.query.orderNo = ''
      filterInfo.query.validityDay = ''
      filterInfo.query.contractType = ''
      filterInfo.query.supplierId = ''
      filterInfo.query[_paramsData.type] = _paramsData.statusCode
      getList()
    }
  },
  {
    immediate: true,
    deep: true
  }
)
getList()
// onMounted(() => {
// })

// 获取列表
function getList() {
  tableInfo.refresh = Math.random()
}
// 搜索
function search() {
  // 重置分页
  tableInfo.initCurpage = Math.random()
  tableInfo.refresh = Math.random()
}

// 触发事件
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.selections = [...data]
      break
  }
}
function tableRowClassName({ row = undefined }) {
  return row.warningType + '-row'
}
</script>

<style scoped lang="scss">
:deep(.el-table .nearly-row) {
  background: #fceacb;
}
:deep(.el-table .expire-row) {
  background: #f5e4e4;
}
// :deep(.el-table__body tr.hover-row > td) {
//   background-color: transparent !important;
// }
</style>
